<template>
  <div class="app">
    <div class="app-main">
      <router-view></router-view>
    </div>
    <div class="TabBar" v-show="!isMainPage">
      <Tabbar></Tabbar>
    </div>
  </div>
</template>

<script>
import '@/assets/resetCss.scss'
import Tabbar from '@/components/Tabbar'

export default {
  name: 'App',
  data () {
    return {
      isMainPage: true
    }
  },
  components: {
    Tabbar
  },
  updated () {
    switch (this.$route.name) {
      case 'home':
        this.isMainPage = false
        return this.isMainPage
      case 'mall':
        this.isMainPage = false
        return this.isMainPage
      case 'mine':
        this.isMainPage = false
        return this.isMainPage
      case 'cart':
        this.isMainPage = false
        return this.isMainPage
      default:
        this.isMainPage = true
        return this.isMainPage
    }
  }
}
</script>

<style lang="scss">
html,
body,
.app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.app {
  display: flex;
  flex-direction: column;
  &-main {
    flex: 1;
    overflow-x: hidden;
  }
  .TabBar {
    width: 100%;
    height: 50px;
    border-top: 1px solid #b0b0b0;
    z-index: 1;
  }
}

</style>
